<script setup lang="ts">
import { ref, computed } from 'vue';
import { useTheme } from 'vuetify';
const theme = useTheme();
const primary = theme.current.value.colors.primary;
const secondary = theme.current.value.colors.warning;
const select = ref('March 2023');
const items = ref(['March 2023', 'April 2023', 'May 2023']);
const chartOptions = computed(() => {
  return {
    series: [
      { name: 'Earnings this month:', data: [355, 390, 300, 350, 390, 180, 355, 390] },
      { name: 'Expense this month:', data: [280, 250, 325, 215, 250, 310, 280, 250] }
    ],
    chartOptions: {
      grid: {
        borderColor: 'rgba(0,0,0,0.1)',
        strokeDashArray: 3,
        xaxis: {
          lines: {
            show: false
          }
        }
      },
      plotOptions: {
        bar: { horizontal: false, columnWidth: '35%', borderRadius: [8] }
      },
      colors: [primary, secondary],
      chart: {
        type: 'bar',
        height: 370,
        offsetX: -15,
        toolbar: { show: true },
        foreColor: '#adb0bb',
        fontFamily: 'inherit',
        sparkline: { enabled: false }
      },
      dataLabels: { enabled: false },
      markers: { size: 0 },
      legend: { show: false },
      xaxis: {
        type: 'category',
        categories: ['16/08', '17/08', '18/08', '19/08', '20/08', '21/08', '22/08', '23/08'],
        labels: {
          style: { cssClass: 'grey--text lighten-2--text fill-color' }
        }
      },
      yaxis: {
        show: true,
        min: 0,
        max: 400,
        tickAmount: 4,
        labels: {
          style: {
            cssClass: 'grey--text lighten-2--text fill-color'
          }
        }
      },
      stroke: {
        show: true,
        width: 3,
        lineCap: 'butt',
        colors: ['transparent']
      },
      // tooltip: { theme: 'light' },

      responsive: [
        {
          breakpoint: 600,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 3
              }
            }
          }
        }
      ]
    }
  };
});
</script>
<template>
  <VCard>
    <VCardItem>
      <div class="d-sm-flex align-center justify-space-between">
        <div>
          <VCardTitle class="text-h5">{{ $t('sales_overview') }}</VCardTitle>
        </div>
        <div class="my-sm-0 my-2">
          <VSelect v-model="select" :items="items" variant="outlined" density="compact" hide-details></VSelect>
        </div>
      </div>
      <div class="mt-6">
        <apexchart type="bar" height="342px" :options="chartOptions.chartOptions" :series="chartOptions.series" />
      </div>
    </VCardItem>
  </VCard>
</template>
